<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.导入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<!-- 如果要在vscode中右键html文件在浏览器中打开,需要安装插件 搜索open,就能看到open in browser插件 -->

<!-- mvvm 分析：
    本案例中 div 就是 Vue实例所控制的元素区域 就是 MVVM 中的 V
    new出来的这个 vm 对象，就是MVVM中的VM调度者
    data就是MVVM中的M 专门用来保存每个页面的数据的

-->

<body>
    <!-- div#app 可以快捷生成一个id为app的div -->
    <!-- 下面new创建的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
        <p>{{msg}}</p>
        <!--插值表达式里面直接 放data里面的属性，就能获取到值了-->
    </div>

    <script>
        // 2.创建一个vue
        // 当我们导入vue之后，在浏览器内存中，就多了一个Vue构造函数
        var vm = new Vue({
            el: '#app', //element缩写，表示我们new的这个Vue的实例 要控制页面上的哪个区域
            data: { //这个data属性中，存放的是 el 中要用到的数据
                msg: '欢迎来到Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，不再操作DOM元素了，前端Vue之类
                    // 的框架，不提倡我们手动操作DOM元素
            }
        })
    </script>
</body>

</html>